<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
	    <meta http-equiv="X-UA-Compatible" content="IE=edge">
	    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
	    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
	    <title>hoyo注册页</title>
		
	    <!-- Bootstrap -->
	    <link href="/hoyo/css/bootstrap.min.css" rel="stylesheet">
	    <link href="/hoyo/css/mine.css" rel="stylesheet" />
	    <style>
	    	#data-nav{
	    		margin-bottom: 0px;
	    	}
	    	.label{
	    		display: block;
	    		width: 100%;
	    		text-align: center;
	    	}
	    	.right{
	    		float: right;
	    	}
	    </style>
	</head>
	<body>
		<div id="data-nav" class="navbar">
			<div class="container">
		  	<div class="navbar-header">
		      <a class="navbar-brand" href="/hoyo/">
		      	<img src="/hoyo/img/logo.png" class="data-img"/>
		      	<span class="data-span">主页</span>
		      </a>
		    </div>
		
	      <ul id="contributor" class="nav navbar-nav navbar-right">
	      	<li th:if="${session.userInfo!=null}">
	      		<a class="data-user" href="/hoyo/user/personalCenter">
	      			<img th:src="${session.userInfo.icon}" class="data-img img-circle" />
	      			<span class="nav-user-name" th:text="${session.userInfo.nickname}">iscream</span>
	      		</a>
	      	</li>
	      	<li th:if="${session.user==null}">
	      		<a href="/hoyo/login">
	      			<span>登录</span>
	      		</a>
	      	</li>
	      	<li th:if="${session.user==null}">
	      		<a href="/hoyo/register" style="padding-right:84px;">
	      			<span>注册</span>
	      		</a>
	      	</li>
	      	
	        <li class="dropdown">
	          <a href="/hoyo/upload" class="dropdown-toggle data-color">投稿</a>
	      	</li>
	      </ul>
		  </div>
		</div>
		
		<div class="container-fluid" style="background-color: #00a0d8;margin-bottom: 50px;">
			<div class="container">
				<img src="img/login-bc.png" />
			</div>
		</div>
		<div class="container">
			<h1 style="text-align: center;margin-bottom: 30px;" >注册</h1>
			<div class="row">
				<div class="col-lg-6 col-lg-offset-3">
					<input name="nickname" type="text" class="form-control input-lg" placeholder="昵称"/>
					<p style="height: 20px;margin: 6px 0 6px 13px"></p>  <!--错误信息-->
					
					<input name="password" type="password" class="form-control input-lg" placeholder="密码(6-16个字符组成，区分大小写)" onblur="checkPassword(this.value)"/>
					<p id="passwordMsg" style="height: 20px;margin: 6px 0 6px 13px"></p>  <!--错误信息-->
					
					<input name="telephone" type="text" class="form-control input-lg" placeholder="填写常用手机号" onchange="checkTelephone(this.value)"/>
					<p id="telephoneMsg" style="height: 20px;margin: 6px 0 6px 13px"></p>  <!--错误信息-->
					
					<div class="input-group input-group-lg">
				      <input id="verifyCode" name="verifyCode" type="text" class="form-control" placeholder="手机验证码">
				      <span class="input-group-btn">
				        <button id="verifyCodeBtn" class="btn btn-info" type="button" disabled="disabled" onclick="getVerifyCode()">点击获取</button>
				      </span>
				    </div>
				    <p id="codeMsg" style="height: 20px;margin: 6px 0 6px 13px"></p>  <!--错误信息-->
				</div>
			</div>
			<div class="row">
				<div class="col-lg-6 col-lg-offset-3">
					<button id="submit" class="btn btn-info btn-block btn-lg" style="margin-bottom: 10px;" disabled="disabled" onclick="sub()">注册</button>
					<button class="btn-link right">已有账号，直接登录></button>
				</div>
			</div>
		</div>
	</body>
	<script src="/hoyo/js/jquery-3.2.1.min.js"></script>
    <script src="/hoyo/js/bootstrap.min.js"></script>
    <script src="/hoyo/js/vue.js"></script>
    <script src="/hoyo/js/iconfont.js"></script>
    <script>
    //var telephonePattern = /^(13[0-9]|14[5|7]|15[0-9]|18[0-9])\d{8}$/;
    var telephonePattern = /^1(3|4|5|7|8)\d{9}$/;
    //var telephonePattern =/^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1}))+\d{8})$/;
    //var passwordPattern = /^((?=.*\d)(?=.*\D)|(?=.*[a-zA-Z])(?=.*[^a-zA-Z]))^.{8,16}$/;
    var passwordPattern = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{8,16}$/;
    var telephonePassed = false, passwordPassed = false;
    var codeGain = false;
    var gainCodeLocked = false;

    /**
     * 检测手机号码是否被使用
     * @param telephone
     * @returns
     */
    function checkTelephone(telephone){
    	var msg = document.getElementById("telephoneMsg");
    	var codeBtn = document.getElementById("verifyCodeBtn");
    	if(!telephonePattern.test(telephone)){
    		msg.innerHTML = "手机号码格式不正确";
    		codeBtn.disabled=true;
    		telephonePassed = false;
    		checkAllPassed();
    		return ;
    	}
    	if(gainCodeLocked){
    		msg.innerHTML = "";
    		telephonePassed = true;
    		checkAllPassed();
    		return ;
    	}
    	msg.innerHTML = "";
    	$.post({
    		url:"/hoyo/telephone/check",
    		data:"telephone="+telephone,
    		success:function(responseText, textStatus, jqXHR){
    			var result = JSON.parse(responseText);
    			if(!result.success){
    				msg.innerHTML="telephone used";
    				telephonePassed = false;
    				checkAllPassed();
    			}else{
    				telephonePassed = true;
    				codeBtn.disabled=false;
    				checkAllPassed();
    			}
    		}
    	});
    }

    /**
     * 获取手机验证码
     * @returns
     */
    function getVerifyCode(){
    	
    	var telephone = document.getElementsByName("telephone")[0].value;
    	$.post({
    		url:"/hoyo/telephone/code",
    		data:"telephone="+telephone,
    		success:function(responseText, textStatus, jqXHR){
    			var result = JSON.parse(responseText);
    			if(result.success){
    				var codeBtn = document.getElementById("verifyCodeBtn");
    				codeBtn.disabled=true;
    				codeGain = true;
    				checkAllPassed();
    				
    				var expired = 60*1000;
    				var count = 1;
    				gainCodeLocked = true;
    				var intervalId = setInterval(function(){
    					codeBtn.innerHTML="已发送("+(expired-1000*count++)/1000+")";
    				},1000);
    				var timeoutId = setTimeout(function(){
    					codeBtn.innerHTML="点击获取";
    					codeBtn.disabled=false;
    					codeGain = false;
    					checkAllPassed();
    					clearInterval(intervalId);
    					clearTimeout(timeoutId);
    					gainCodeLocked = false;
    				}, expired);
    			}
    		}
    	});
    }

    /**
     * 密码校验
     * @param password
     * @returns
     */
    function checkPassword(password){
    	var msg = document.getElementById("passwordMsg");
    	if(!passwordPattern.test(password)){
    		msg.innerHTML="8到16位数字与字母组合";
    		passwordPassed = false;
    		checkAllPassed();
    		return ;
    	}
    	msg.innerHTML="";
    	passwordPassed = true;
    	checkAllPassed();
    };

    /**
     * 检测所有的数据格式是否已通过
     * @returns
     */
    function checkAllPassed(){
    	var submitBtn = document.getElementById("submit");
    	/* if(!telephonePassed || !passwordPassed || !codeGain){ */
    	if(!telephonePassed || !passwordPassed){
    		submitBtn.disabled = true;
    	}else{
    		submitBtn.disabled = false;
    	}
    }

    /**
     * 提交注册表单
     * @returns
     */
    function sub(){
    	var telephone = document.getElementsByName("telephone")[0].value;
    	var verifyCode = document.getElementsByName("verifyCode")[0].value;
    	var password = document.getElementsByName("password")[0].value;
    	var nickname = document.getElementsByName("nickname")[0].value;
    	console.info("telephone="+telephone+"&verifyCode="+verifyCode+"&password="+password+"&nickname="+nickname);
    	$.post({
    		url:"/hoyo/register",
    		data:"phone="+telephone+"&verifyCode="+verifyCode+"&password="+password+"&nickname="+nickname,
    		success:function(responseText, textStatus, jqXHR){
    			var result = JSON.parse(responseText);
    			console.log(result);
    			if(result.success){
    				document.location.href="/hoyo/login";
    			}else{
    				var errors = result.error;
    				var msg = document.getElementById("codeMsg");
    				msg.innerHTML = errors;
    			}
    		}
    	});
    }
    </script>
</html>
